<template>
	<div class="images">
		<h3 class="title">{{photoinfo.title}}</h3>
		<p class="subtitle">
			<span>发表时间：{{photoinfo.add_time|dateFormat}}</span>
			<span>点击：{{photoinfo.click}}</span>
			<hr />
			<!-- 缩略图区域 -->
		  <vue-preview :slides="list" @close="handleClose"></vue-preview>
			<!-- 图片内容区 -->
			<div class="content">
				
				{{photoinfo.content}}
				<!-- 评论子组件 -->
				<cmt-box></cmt-box>
			</div>
		</p>
	</div>
</template>

<script>
	import comment from '../subcomponent/comment.vue'
	export default({
		data() {
			return {
				id: this.$route.params.id,//从路由中获取到的id
				photoinfo:{},
				list:[]
			}
		},
		created(){
			this.getPhotoInfo()
			this.getminimg()
		},
		methods:{
			getPhotoInfo(){
				this.$http.get('http://localhost:3002/photoInfo').then(result=>{
					if(result.body.status===0){
						var arr = []
						arr = result.body.message
						for (let index in arr) {
							if(arr[index].id == this.id){
								this.photoinfo = arr[index]
								break;
								}
						}
					}
				})
			},
			getminimg(){
				this.$http.get('http://localhost:3002/minimg').then(result=>{
					if(result.body.status===0){
						var arr = []
						arr = result.body.message
						for (let index in arr) {
							if(arr[index].imgid == this.id){
								this.list.push(arr[index])
								}
						}
					}
				})
			},
			handleClose () {
        console.log('close event')
      }
			
		},
		components: {
			'cmt-box':comment
		},
	})
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.title{
		text-align: center;
		font-weight: 140;
		font-size: 16px;
		margin: 4px;
		color: #26A2FF;
	}
	.subtitle{
		color:#656B79 ;
		display: flex;
		justify-content: space-around;
		font-size: 13px;
	}
	.content{
		font-size: 13px;
	}
	cmt-box{
		margin-top: 20px;
	}
 img{
		 width: 100px !important;
		 height: 100px !important;
	 }
</style>
